<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>书籍详情</title>
    <link rel="stylesheet" th:href="@{/layui/dist/css/layui.css}"  media="all">
</head>
<body class="layui-view-body">
<div class="layui-content">
    <div class="layui-row">
        <div class="layui-col-md11">
            <form class="layui-form" lay-filter="formTestFilter2121" style="margin-top: 50px;margin-left: 200px" th:action="@{/updateBookManage}"
                  method="post" enctype="multipart/form-data">
                <input type="text" hidden="hidden" th:value="${book.id}" name="id">

                <p class="f-l">书籍封面：</p>
                <div class="touxiang f-l" style="margin-left: 60px">
                         <span class="btn btn-success fileinput-button  layui-btn">
                            <span>修改点击灰色处</span>
                            <input type="file" class="btn btn-success fileinput-button "
                                   id="xdaTanFileImg" onchange="xmTanUploadImg(this)" style="width: 10px"
                                   accept="image/*"  name="file" />
                            </span>
                    <div class="tu f-l">
                            <span th:if="'/article/'+${book.photo}">
                            <a href="#">
                                <img style="width: 74px;height: 75px" th:src="@{'/article/'+ ${book.photo}}" />
                            </a>
                            </span>
                        <span th:unless="${book.photo}">
                             <img th:src="@{/images/center.png}">
                              </span>
                        <img id="xmTanImg" style="position: absolute;left:260px;width: 74px;height: 75px"/>
                    </div>
                    <br>

                    <div style="clear:both;"></div>
                </div>
                <br> <br> <br>

                <div class="layui-form-item">
                    <label class="layui-form-label">书籍编号：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="bookNumber" class="layui-input" readonly="readonly" th:value="${book.bookNumber}" >
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">书籍名称：</label>
                    <div class="layui-input-inline" style="width: 210px">
                        <input type="text" name="bookName" class="layui-input" th:value="${book.bookName}" >
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">出版社：</label>
                    <div class="layui-input-inline" style="width: 240px;">
                        <input type="text" name="bookPublishers" class="layui-input" th:value="${book.bookPublishers}">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">书籍作者：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="bookAuthor"  class="layui-input" th:value="${book.bookAuthor}">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">书籍类型：</label>
                    <div class="layui-input-block" style="width: 350px;">
                        <select name="bookType" lay-verify="required" >
                            <option value="" th:value="${book.bookType}"></option>
                            <option th:selected="${book.bookType == 1}" value=1>古典文学</option>
                            <option th:selected="${book.bookType == 2}" value=2>青春文学</option>
                            <option th:selected="${book.bookType == 3}" value=3>小说</option>
                            <option th:selected="${book.bookType == 4}" value=4>艺术</option>
                            <option th:selected="${book.bookType == 5}" value=5>文化</option>
                            <option th:selected="${book.bookType == 6}" value=6>历史</option>
                            <option th:selected="${book.bookType == 7}" value=7>经济</option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">书籍总量：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="bookAllNum"  class="layui-input" th:value="${book.bookAllNum}">
                    </div>
                    <label class="layui-form-label">剩余量：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="bookNum"  class="layui-input" th:value="${book.bookNum}">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">书籍简介：</label>
                    <div class="layui-input-inline" style="width: 500px;height: 120px">
                        <textarea  name="brief" class="layui-input" style="width: 500px;height: 120px"
                        th:text="${book.brief}">

                        </textarea>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn layui-btn-normal" style="width: 80px;" type="submit" onclick="exit()">修改</button>
                        <button type="button" class="layui-btn layui-btn-normal" onclick="exit()" style="width: 80px;">返回</button>
                    </div>
                </div>
            </form>
    </div>
</div>
</div>
<script th:src="@{/layui/dist/layui.all.js}" charset="utf-8"></script>
<script th:src="@{/js/jquery.min.js}" charset="utf-8"></script>
<script th:src="@{/mb/js/jquery-3.3.1.min.js}" type="text/javascript"></script>
<script th:src="@{/mb/js/jquery.js}" type="text/javascript"></script>
<script type="text/javascript" th:src="@{/js/Contacts.js}"></script>
<script type="text/javascript" th:src="@{/js/information.js}"></script>
<script type="text/javascript" th:src="@{/dist/js/bootstrap.min.js}"></script>

<script type="text/javascript">
    function exit() {
        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
        parent.layer.close(index); //再执行关闭
    }
</script>
<script type="text/javascript">

    //选择图片，马上预览
    function xmTanUploadImg(obj) {
        var file = obj.files[0];

        console.log(obj);
        console.log(file);
        console.log("file.size = " + file.size);  //file.size 单位为byte

        var reader = new FileReader();

        //读取文件过程方法
        reader.onloadstart = function (e) {
            console.log("开始读取....");
        }
        reader.onprogress = function (e) {
            console.log("正在读取中....");
        }
        reader.onabort = function (e) {
            console.log("中断读取....");
        }
        reader.onerror = function (e) {
            console.log("读取异常....");
        }
        reader.onload = function (e) {
            console.log("成功读取....");

            var img = document.getElementById("xmTanImg");
            img.src = e.target.result;
        }

        reader.readAsDataURL(file)
    }
</script>

</body>
</html>
